<template>
  <view
    class="container bg-back flex-1 flex flex-col px-[3%] pt-[2%] justify-between"
  >
    <view>
      <view v-if="isBigSreen">
        <view class="text-center text-2main font-bold mt-[10.5%]"
          >扫码上传正脸照片 · 一键制作</view
        >
        <view
          class="w-[480rpx] aspect-square mx-auto mt-[5%] mb-[10.5%] relative"
        >
          <canvas
            class="absolute -z-10"
            canvas-id="qrcode"
            style="width: 480rpx; height: 480rpx"
          />
          <image class="w-full h-full" :src="state.img"></image>
        </view>
      </view>
      <view v-else>
        <view class="text-center text-main font-bold mt-[10.5%]"
          >点击添加照片</view
        >
        <view
          class="w-[120px] aspect-square bg-white mx-auto mt-[5%] mb-[10.5%] rounded-xl overflow-hidden"
        >
          <up-upload
            style="width: 100%"
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="1"
            width="120"
            height="120"
            :previewFullImage="false"
          >
            <template #default>
              <view
                class="w-[120px] aspect-square flex justify-center items-center"
              >
                <u-icon name="plus" color="#666666" size="24"></u-icon>
              </view>
            </template>
          </up-upload>
        </view>
      </view>
      <view
        class="bg-white py-[5%]"
        :class="isBigSreen ? 'rounded-[40rpx] ' : 'rounded-[20rpx] '"
      >
        <view class="flex flex-col justify-center flex-1 items-center">
          <view class="flex justify-center relative">
            <image
              class="bg-[#efc7b3]"
              :class="
                isBigSreen
                  ? 'big-bor w-[384rpx] h-[384rpx]'
                  : 'bor w-[192rpx] h-[192rpx]'
              "
              mode="aspectFit"
              src="@/static/5.png"
            ></image>
            <image
              :class="[
                isBigSreen ? 'w-[96rpx] h-[96rpx]' : 'w-[48rpx] h-[48rpx]',
                isBigSreen
                  ? 'bottom-[12rpx] right-2'
                  : '-bottom-[2rpx] right-0',
              ]"
              class="absolute"
              src="@/static/choose.png"
            >
            </image>
          </view>
          <view
            class="text-main mt-[7%]"
            :class="isBigSreen ? 'text-2base' : 'text-base'"
            >正脸清晰照</view
          >
          <view
            class="flex items-center flex-1 w-full justify-center mb-[4%] mt-[8%]"
          >
            <view :class="isBigSreen ? 'big-line' : 'line'"></view>
            <view
              class="text-muted px-[5%]"
              :class="isBigSreen ? 'text-2xs' : 'text-xs'"
              >请根据提示拍照 避免以下情况</view
            >
            <view :class="isBigSreen ? 'big-line ' : 'line'"></view>
          </view>
          <view class="flex justify-between w-full px-[7%]">
            <view class="w-1/4 mr-[2.4%]">
              <view class="relative">
                <image
                  class="w-full"
                  mode="widthFix"
                  src="@/static/1.png"
                ></image>
                <image
                  src="@/static/error.png"
                  mode="widthFix"
                  class="aspect-square absolute right-0 bottom-0"
                  :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
                ></image>
              </view>
              <view
                class="text-main text-center pt-[5%]"
                :class="isBigSreen ? 'text-2base' : 'text-base'"
                >五官模糊</view
              >
            </view>
            <view class="w-1/4 mx-[2.4%]">
              <view class="relative">
                <image
                  class="w-full"
                  mode="widthFix"
                  src="@/static/2.png"
                ></image>
                <image
                  src="@/static/error.png"
                  mode="widthFix"
                  class="aspect-square absolute right-0 bottom-0"
                  :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
                ></image>
              </view>
              <view
                class="text-main text-center pt-[5%]"
                :class="isBigSreen ? 'text-2base' : ' text-base'"
                >侧脸</view
              >
            </view>
            <view class="w-1/4 mx-[2.4%]">
              <view class="relative">
                <image
                  class="w-full"
                  mode="widthFix"
                  src="@/static/3.png"
                ></image>
                <image
                  src="@/static/error.png"
                  mode="widthFix"
                  class="aspect-square absolute right-0 bottom-0"
                  :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
                ></image>
              </view>
              <view
                class="text-main text-center pt-[5%]"
                :class="isBigSreen ? 'text-2base' : ' text-base'"
                >戴帽子</view
              >
            </view>
            <view class="w-1/4 ml-[2.4%]">
              <view class="relative">
                <image
                  class="w-full"
                  mode="widthFix"
                  src="@/static/4.png"
                ></image>
                <image
                  src="@/static/error.png"
                  mode="widthFix"
                  class="aspect-square absolute right-0 bottom-0"
                  :class="isBigSreen ? 'w-[25%]' : 'w-[48rpx]'"
                ></image>
              </view>
              <view
                class="text-main text-center pt-[5%]"
                :class="isBigSreen ? 'text-2base' : ' text-base'"
                >手势遮挡</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <template v-if="!isBigSreen">
      <view class="flex justify-center pb-[10%]" v-if="!state.isCheck">
        <view
          @click="goback"
          class="flex items-center justify-center re-btn"
          :class="isBigSreen ? 'big-btn' : ''"
        >
          <!-- <image
          :class="isBigSreen ? ' w-[72rpx] h-[72rpx]' : 'w-[36rpx] h-[36rpx]'"
          src="@/static/change.png"
        ></image> -->
          <view class="font-bold" :class="isBigSreen ? 'text-2main' : ''"
            >重选模板</view
          >
        </view>
        <view
          @click="submit"
          class="flex items-center justify-center up-btn"
          :class="isBigSreen ? 'big-btn' : ''"
        >
          <view
            class="font-bold text-white"
            :class="isBigSreen ? 'text-2main' : ''"
            >确认上传</view
          >
        </view>
      </view>
    </template>

    <!-- <view
      class="flex justify-center pb-[10%] text-[#2568ec]"
      :class="isBigSreen ? 'mt-[16%]' : ''"
      v-if="state.isCheck && fileList.length && fileList[0].status == 'success'"
    >
      请回到大屏设备确认上传
    </view> -->
    <up-overlay :show="show">
      <view class="flex flex-1 bg-back flex-col items-center">
        <view
          class="mt-[5%] w-full h-1/2"
          :class="isBigSreen ? ' rounded-3xl' : ' rounded-2xl'"
        >
          <view
            class="font-bold text-center mt-[12%]"
            :class="isBigSreen ? 'text-2main' : ''"
          >
            我的照片</view
          >
          <view
            class="aspect-square mx-auto mt-[15%]"
            :class="isBigSreen ? 'w-[384rpx]' : 'w-[192rpx]'"
          >
            <image
              class="w-full h-full"
              mode="aspectFill"
              :class="isBigSreen ? 'big-bor' : 'bor'"
              :src="fileList[0].orgurl"
            ></image>
          </view>
          <view class="aspect-square mx-auto mt-[15%] w-[62%]">
            <image
              class="w-full h-full"
              mode="widthFix"
              src="@/static/loading.png"
            >
            </image>
          </view>
        </view>

        <!-- <up-overlay :show="true" opacity="0.28">
          <view class="flex-1 flex flex-col items-center justify-center">
            <view
              class="w-[44%] bg-white flex justify-center items-center flex-col rounded-2xl"
              style="aspect-ratio: 336/298"
            >
              <image
                class="w-[45%] aspect-square"
                mode="widthFix"
                src="@/static/time2.png"
              ></image>
              <view
                class="font-bold text-base mt-[3%]"
                :class="isBigSreen ? 'text-2base' : ''"
              >
                AI写真正在生成中...
              </view>
            </view>
          </view>
        </up-overlay> -->
      </view>
    </up-overlay>
    <view class="slide" v-if="isBigSreen">
      <view v-if="open" class="content">
        <view class="circle light mb-30" @click="submit()">
          <view class="slc">确认 </view>
          <view class="slc">上传</view>
        </view>
        <view class="circle light mb-30" @click="goback">
          <view class="slc">重选 </view>
          <view class="slc">模版</view>
        </view>

        <view class="circle dark" @click="goHome"> 首页 </view>
      </view>
      <view class="jiantou">
        <view :class="open ? 'a mt-6' : 'b'" @click="handleSilde">
          <up-icon name="arrow-left-double" color="#8a8f96" size="36"></up-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import uQrCode from "@/utils/uQrCode.js";
import {
  getQrCode,
  uploadFile,
  getUploadAuth,
  createPic,
  confirmQrCode,
} from "@/api/ai.js";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { ref, reactive, computed, nextTick } from "vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const show = ref(false);
const state = reactive({
  auth_code: "",
  qr_code: "",
  id: "",
  img: "",
  isCheck: false,
  scence_id: "",
});
const fileList = ref([]);

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  const auth_code = await getUploadAuth();
  console.log(lists, auth_code);
  try {
    const result = await uploadFile({
      filePath: fileList.value[0].url,
      name: "file",
      formData: {
        auth_code: auth_code.auth_code,
        qr_code: state.qr_code,
      },
    });
    console.log(result);

    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: "success",
      message: "",
      orgurl: result.data.fullurl,
      url: result.data.face_url,
    });
    if (state.isCheck) {
      // submit();
      uni.showModal({
        title: "温馨提示",
        content: "上传成功，请到大屏点击【确认上传】",
        showCancel: false,
        confirmText: "我知道了",
      });
    }
  } catch (error) {
    console.log(error, "errorerror");
    fileList.value = [];
  }
};

const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

const goback = () => {
  if (!isBigSreen.value && state.qr_code) {
    return uni.redirectTo({ url: `/pages/ai/index` });
  }
  if (fileList.value.length && fileList.value[0].status != "success")
    return uni.$u.toast("请等待图片上传...");
  uni.navigateBack();
};
const submit = () => {
  if (isBigSreen.value) {
    return confirmQrCode({
      qr_code: state.qr_code,
    })
      .then((ress) => {
        fileList.value.push({ url: ress.fullurl, orgurl: ress.fullurl });
        show.value = true;
        createPic({
          face_url: ress.face_url,
          mould_id: state.id,
          scence_id: state.scence_id,
        })
          .then((res) => {
            uni.setStorageSync("aiData", {
              ai_image: res.data.image,
              share_id: res.data.share_id,
              share_url: res.data.share_url,
            });
            uni.redirectTo({
              url: `/pages/ai/result?id=${res.data.share_id}`,
            });
          })
          .catch((err) => {
            uni.setStorageSync("errData", {
              title: err.msg,
              ai_image: ress.fullurl,
            });
            uni.redirectTo({ url: `/pages/ai/fail?id=${state.id}` });
          });
      })
      .catch((err) => {
        uni.showModal({
          content: err,
          showCancel: false,
        });
      });
  }
  if (fileList.value.length == 0) return uni.$u.toast("请先上传图片");
  if (fileList.value[0].status != "success")
    return uni.$u.toast("请等待图片上传...");

  show.value = true;
  // return;
  createPic({
    face_url: fileList.value[0].url,
    mould_id: state.id,
    scence_id: state.scence_id,
  })
    .then((res) => {
      console.log(res);
      uni.setStorageSync("aiData", {
        ai_image: res.data.image,
        share_id: res.data.share_id,
        share_url: res.data.share_url,
      });
      uni.redirectTo({
        url: `/pages/ai/result?id=${res.data.share_id}`,
      });
    })
    .catch((err) => {
      uni.setStorageSync("errData", {
        title: err.msg,
        ai_image: fileList.value[0].orgurl,
      });
      uni.redirectTo({
        url: `/pages/ai/fail?id=${state.id}&scence_id=${state.scence_id}`,
      });
    });
};

const getUrlImg = () => {
  getQrCode().then((res) => {
    state.qr_code = res.qr_code;
    codeInit();
  });
};
onLoad(({ id, code, scence_id }) => {
  state.scence_id = scence_id;
  state.id = id;
  if (code) {
    state.qr_code = code;
    state.isCheck = true;
    console.log(state.qr_code);
  }
});

onReady(() => {
  if (isBigSreen.value) {
    getUrlImg();
  }
});

function codeInit() {
  uQrCode.make({
    canvasId: "qrcode",
    text: location.href + `&code=${state.qr_code}`,
    size: 200,
    margin: 0,
    backgroundColor: "#ffffff",
    foregroundColor: "#000000",
    fileType: "jpg",
    errorCorrectLevel: uQrCode.errorCorrectLevel.H,
    success: (res) => {
      state.img = res;
    },
  });
}
const open = ref(true);
const handleSilde = () => {
  open.value = !open.value;
};

const goHome = () => {
  uni.reLaunch({
    url: "/pages/ai/home",
  });
};
</script>

<style lang="scss" scoped>
.line {
  width: 80rpx;
  height: 0rpx;
  border: 2rpx solid #eaeaea;
}
.big-line {
  width: 160rpx;
  height: 0rpx;
  border: 4rpx solid #eaeaea;
}
.re-btn {
  width: 32%;
  aspect-ratio: 60/21;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  border: 2rpx solid #2568ec;
  color: #1250b5;
  margin-right: 4.5%;
}
.up-btn {
  width: 32%;
  aspect-ratio: 60/21;
  background: #2568ec;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  margin-left: 4.5%;
}
.big-btn {
  border-radius: 100rpx 100rpx 100rpx 100rpx !important;
}

.bor {
  border-radius: 50%;
  border: 4rpx solid #0256ff;
}
.big-bor {
  border-radius: 50%;
  border: 8rpx solid #0256ff;
}
::v-deep .u-upload__success {
  display: none;
}
::v-deep .u-upload__deletable {
  right: 8rpx;
}
.slide {
  position: fixed;
  z-index: 555;

  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 48rpx 20rpx;
  bottom: 20%;
  width: 248rpx;
  background: linear-gradient(
    180deg,
    rgba(53, 58, 64, 0.9) 0%,
    rgba(22, 23, 27, 0.9) 100%
  );
  border-radius: 64rpx 0rpx 0rpx 120rpx;
  border: 1rpx solid;
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(66.00000366568565, 71.00000336766243, 80.00000283122063, 1),
  //     rgba(32.00000189244747, 35.00000171363354, 38.0000015348196, 1)
  //   )
  //   4 4;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 188rpx;
    height: 188rpx;
    font-size: 48rpx;
    font-weight: 600;
    text-align: center;
    color: #c3c8cd;
    .slc {
      line-height: 1.2;
    }
    &.light {
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0px 0px 50px rgba(38, 171, 247, 0.2),
        0px 0px 20px rgba(99, 207, 255, 0.5);
      background: linear-gradient(321deg, #0077ce 0%, #4ec0ff 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      filter: blur(0.3px);
    }
    &.dark {
      background: linear-gradient(318deg, #1d2328 0%, #131314 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      filter: blur(0.3px);

      box-shadow: inset 0rpx 0rpx 3rpx 0rpx rgba(63, 63, 63, 0.45);
    }
    &.mb-30 {
      margin-bottom: 30rpx;
    }
  }
  .jiantou {
    .a {
      transform: rotate(90deg);
    }
    .b {
      transform: rotate(-90deg);
    }
  }
}
.bbb {
  background-size: cover;
  background-position: center center;
}
</style>
